<template>
	<view class="flex-col homepage">
		<u-form-item class="formItemInput" label="小区" :label-width="70" @click="FindXq">
			<u-input placeholder="请选择" v-model="form2.community" type="text"></u-input>
		</u-form-item>
		<u-form-item class="formItemInput" label="楼栋" :label-width="70" @click="FindLd">
			<u-input placeholder="请选择" v-model="form2.building" type="text"></u-input>
		</u-form-item>
		<u-form-item class="formItemInput-two" label="楼层" :label-width="70" @click="FindLc">
			<u-input placeholder="请选择" v-model="form2.floor" type="text"></u-input>
		</u-form-item>
		<u-form-item class="formItemInput-two" label="户号" :label-width="70" @click="FindMh">
			<u-input placeholder="请选择" v-model="form2.portal" type="text"></u-input>
		</u-form-item>
		<u-form-item class="formItemActionSheet" label="房屋状态" :label-width="70">
			<uni-data-select v-model="form.state" :localdata="range" @change="change"></uni-data-select>
		</u-form-item>
		<view class="flex-row wrapper">
			<view class="u-line-1 text" style="width: 100px;">设为默认房屋</view>
			<u-switch v-model="tttt" @change="ttttq()"></u-switch>
		</view>
		<u-button type="primary" text="下一步" style="width: 300px;" @click="thenextstep()"></u-button>
		<view>
			<!-- //小区 -->
			<u-popup :show="show" mode="right">
				<view v-for="(item, index) in this.Community">
					<u-tag :text="item.communityName" plain size="mini" type="warning" class="ttt" @click="xqhx(item)">
					</u-tag>
				</view>
			</u-popup>
			<!-- //楼栋 -->
			<u-popup :show="show2" mode="right">
				<view v-for="(item, index) in this.Building">
					<u-tag :text="item.howMany" plain size="mini" type="warning" class="ttt" @click="ldhx(item)">
					</u-tag>
				</view>
			</u-popup>
			<!-- //楼层 -->
			<u-popup :show="show3" mode="right">
				<view v-for="(item, index) in this.Floor">
					<u-tag :text="item.howFloor+'层'" plain size="mini" type="warning" class="ttt" @click="lchx(item)">
					</u-tag>
				</view>
			</u-popup>
			<!-- //户号 -->
			<u-popup :show="show4" mode="right">
				<view v-for="(item, index) in this.Portal">
					<u-tag :text="item.howPortal" plain size="mini" type="warning" class="ttt" @click="mhhx(item)">
					</u-tag>
				</view>
			</u-popup>
		</view>


	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				show2: false,
				show3: false,
				show4: false,
				user: {},
				middleId: '',
				carNumber: false,
				tttt: false,
				single: '',
				sc: '',
				Community: [],
				Building: [],
				Floor: [],
				Portal: [],
				form: {
					middleId: 0,
					userId: '',
					communityId: '',
					buildingId: '',
					floorId: '',
					portalId: '',
					state: '',
					defaultState: ''
				},
				form2: {
					community: '',
					building: '',
					floor: '',
					portal: '',
					state: ''
				},
				range: [{
						value: 1,
						text: "自主"
					},
					{
						value: 2,
						text: "闲置"
					},
					{
						value: 3,
						text: "出租"
					},
					{
						value: 4,
						text: "出借"
					}
				],
			}

		},
		onLoad() {

		},
		methods: {
			thenextstep() {
				if (this.tttt == true) {
					this.form.defaultState = '是'
				}
				if (this.tttt == false) {
					this.form.defaultState = '不是'
				}
				this.user = uni.getStorageSync('user')
				this.form.userId = this.user.userId
				uni.navigateTo({
				    url: './AddUserInfo?data='+encodeURIComponent(JSON.stringify(this.form)),
				    success: function(res) {              
				    }
				})
			},
			FindXq() {
				this.show = true
				this.$axios({
					url: 'serverwg/WjxFindAllCommunity',
					data: {},
					method: 'GET',
					success: (res) => {
						this.Community = res.data.data.Community
					}
				})
			},
			FindLd() {
				this.show2 = true
				this.$axios({
					url: 'serverwg/WjxFindAllBuilding',
					data: {},
					method: 'GET',
					success: (res) => {
						this.Building = res.data.data.Building
					}
				})
			},
			FindLc() {
				this.show3 = true
				this.$axios({
					url: 'serverwg/WjxFindAllFloor',
					data: {},
					method: 'GET',
					success: (res) => {
						this.Floor = res.data.data.Floor
					}
				})
			},
			FindMh() {
				this.show4 = true
				this.$axios({
					url: 'serverwg/WjxFindAllPortal',
					data: {},
					method: 'GET',
					success: (res) => {
						this.Portal = res.data.data.Portal
					}
				})
			},
			//选择小区
			xqhx(data) {
				this.form.communityId = data.communityId
				this.form2.community = data.communityName
				this.show = false
			},
			ldhx(data) {
				this.form.buildingId = data.buildingId
				this.form2.building = data.howMany
				this.show2 = false
			},
			lchx(data) {
				this.form.floorId = data.floorId
				this.form2.floor = data.howFloor
				this.show3 = false
			},
			mhhx(data) {
				this.form.portalId = data.portalId
				this.form2.portal = data.howPortal
				this.show4 = false
			},
			change(text) {
				if (text == 1) {
					this.form2.state = '自主'
				}
				if (text == 2) {
					this.form2.state = '闲置'
				}
				if (text == 3) {
					this.form2.state = '出租'
				}
				if (text == 4) {
					this.form2.state = '出借'
				}

			},
			ttttq(da) {
				if (this.tttt == true) {
					this.form.defaultState = '是'
				}
				if (this.tttt == false) {
					this.form.defaultState = '不是'
				}
			}


		}
	}
</script>
<style lang="scss" scoped>
	/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
		font-size: 16px
	}

	view,
	text,
	image {
		position: relative;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.ttt {
		margin: 10px 30px 10px 30px;
	}

	.flex-col {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		align-items: flex-start;
	}

	.flex-col .flex-row {
		width: 100%
	}

	/** 全局样式-结束*/

	.homepage {
		height: 1623.188rpx;
		padding: 28.986rpx 0rpx 0rpx 1.812rpx;
		border-color: #ff9900;

		.formItemInput {
			width: 100%;
		}

		.formItemActionSheet {
			width: 100%;
		}

		.formItemInput-two {
			width: 100%;
			margin-bottom: 12.681rpx;
		}

		.wrapper {
			width: 262.681rpx;
			justify-content: space-between;
			margin-bottom: 21.739rpx;

			.text {
				width: 114.13rpx;
				margin-top: 14.493rpx;
			}
		}
	}
</style>
